<template>
    <view>
        <uni-section title="qn" type="line" subTitle="问卷问题，指定json数据，定义语法规则，生成动态内容"></uni-section>
        <view class="uni-title"><text>指定json数据</text></view>
        <view class="uni-textarea">
            <textarea v-model="data" @confirm="confirm" auto-height></textarea>
        </view>
        <view class="uni-title"><text>定义语法规则</text>
            <checkbox style="float:right;transform: scale(0.8);" :checked="isCondition" @click="changeCondition">是否带出条件</checkbox>
        </view>
        <view class="uni-textarea">
            <textarea v-model="qn" @confirm="confirm" auto-height></textarea>
        </view>
        <view class="uni-title"><text>生成动态内容</text><button style="float:right;transform: scale(0.8);" @click="confirm">生成</button></view>
        <view class="uni-text">{{content}}</view>
        <view class="uni-title"><text>语法规则</text></view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="text-box">
                <text decode="true">
{变量}：支持转义字符\{非变量}、\(非条件)
(条件)[内容]：条件返回true、false，支持and、or
&amp;lt;{列表}&amp;gt;[内容]：{列表}为空即&amp;lt;&amp;gt;表示顶层循环
特殊：[、-]去掉末尾顿号，{列表}!=EMPTY列表非空
                </text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: "{姓名:'小明',兄弟:[{姓名:'大毛',排行:'老大'},{姓名:'二毛',排行:'老二'}]}",
                qnContent: "{姓名}的父亲有三个儿子，<{兄弟}>[{排行}叫{姓名}，-]，请问老三叫什么？",
                qnCondition: "{姓名}=小明",
                qn: "",
                isCondition: false,
                content: "小明的父亲有三个儿子，老大叫大毛，老二叫二毛，请问老三叫什么？"
            }
        },
        onReady() {
            this.qn = this.qnContent
        },
        methods: {
            changeCondition: function(e) {
                this.isCondition = !this.isCondition
                this.qn = this.isCondition ? this.qnCondition : this.qnContent
                this.confirm()
            },
            confirm: function() {
                uni.request({
                    url: getApp().globalData.api.service + '/html/jsQnEval.json',
                    method: 'POST',
                    data: {
                        data: this.data,
                        qn: this.qn,
                        isCondition: this.isCondition
                    },
                    success: res => {
                        if (res.data) {
                            this.content = res.data.result || res.data.error
                        }
                    }
                });
            }
        }
    }
</script>

<style>
    .uni-title {
        font-size: 16px;
        padding: 10px;
    }

    .uni-textarea {
        padding: 10px;
        height: 60%
    }
</style>
